<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			p{
				border: 1px solid red;
				fl oat: left;
				font-size: 16px;/*页面文字默认大小：16px*/
				line-height: 20px;/*浮动p块元素，内容行内元素*/
				/* 结论：文本不能浮动，特点：块包行 */
			}
			img{
				float: right;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/img2.png" alt="哪吒" width="250px" height="250px" />
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium architecto, rerum quam atque illum sit eum aut amet quidem. Impedit omnis aliquam adipisci, vero est error fugiat sequi reiciendis. Impedit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates sint ducimus, obcaecati consectetur provident, quidem minima impedit incidunt ipsum facere officiis est a beatae odio, aperiam quos veniam maiores culpa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, eius! Ullam repellat amet reiciendis quos voluptatem, odit inventore officia itaque distinctio temporibus numquam suscipit quia aliquid odio ut adipisci animi! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ab qui laborum, cumque eaque consectetur libero molestias vel doloribus perferendis corporis neque officia iusto id ullam esse veritatis quidem nobis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos accusantium maiores iure quaerat? Ratione, ullam quo sed iure impedit, atque illo possimus molestias accusantium provident porro vel et asperiores aliquam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum quia tempora laboriosam quam, explicabo, voluptatibus est sequi minima, nesciunt reprehenderit illo assumenda architecto atque repudiandae aliquid sint ea distinctio delectus? </p>
	</body>
</html>